<template>
	<view class="bg-color" :style="{height: height+'px',top: top+'px'}">
		<view class="hand" :style="{opacity: opacity}"></view>
		<view class="before" :style="{opacity: opacity}"></view>
	</view>
</template>

<script>
	export default {
		props:{
			height: {
				type: Number,
				default: 0
			},
			top: {
				type: Number,
				default: 0
			},
			opacity: {
				type: Number,
				default: 1
			}
		},
		name:"bgColor",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.bg-color{
		position: absolute;
		width: 100%;
		overflow: hidden;
		>view{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			
		}
		>view.hand{
			z-index: -1;
			width: 200%;
			height: 220%;
			border-radius: 50%;
			transform: translate(-60%,-45%);
			background: linear-gradient(rgba(221, 94, 137,1), rgba(247, 187, 151,0.6));
		}
		>.before{
			z-index: -2;
			background: linear-gradient(rgb(235, 51, 73), rgba(244, 92, 67,0.7));
		}
	}
</style>
